<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="../js/jquery-3.3.1.min.js"></script>

    <script src="../js/NetRequest.js"></script>

    <script type="application/javascript">

        /**
         * 这里要注意几点：

         processData设置为false。因为data值是FormData对象，不需要对数据做处理。
         <form>标签添加enctype="multipart/form-data"属性。
         cache设置为false，上传文件不需要缓存。
         contentType设置为false。因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。
         上传后，服务器端代码需要使用从查询参数名为file获取文件输入流对象，因为<input>中声明的是name="file"。
         *
         *
         *
         */



        $(document).ready(function () {


            var onloadFile = function () {

                var formData = new FormData($('#uploadForm')[0]);
                $.ajax({
                    url: '../upload',
                    type: 'POST',
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false
                }).done(function (res) {

                }).fail(function (res) {
                });
            }

            document.getElementById("submit").onclick = function (e) {
                e.preventDefault();
                onloadFile();
            }
        })


    </script>

</head>
<body>
<form id="uploadForm" method="post" enctype="multipart/form-data">
    <p>
        <span>选择文件</span>
        <input type="file" name="file" class="file">
    </p>
    <p>
        <span>选择文件</span>
        <input type="file" name="file" class="file">
    </p>
    <p>
        <span>选择文件</span>
        <input type="file" name="file" class="file">
    </p>
    <p>
        <button id="submit">提交</button>
    </p>
</form>

</body>

</html>